<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="关联订单">
            <el-input class="input" v-model="searchParams.orderId" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input class="input" v-model="searchParams.userCode" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="处理状态" prop="orderStatus">
            <el-select v-model="searchParams.orderStatus" placeholder="请选择" clearable>
              <el-option v-for="item in formData.options.orderStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="createTime" label="记录时间">
            <el-date-picker
                @change="changeTime"
                v-model="dateRange"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                >
                </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search"
              style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true" style="margin:10px 0">
          <el-button @click="operateAction('export', {})" type="primary" plain size='small'>导出</el-button>
          <!-- <el-button @click="operateAction('handleBatch', {})" type="primary" plain size='small'>批量处理</el-button> -->
        </el-form>
        <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="id" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="记录时间" width="160">
            <template slot-scope="{row, index}">
              {{ formatTime.dateFormat('YY-MM-DD hh:mm:ss', row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="订单ID" show-overflow-tooltip width="170"></el-table-column>
          <el-table-column prop="shopModel.name" label="商户" show-overflow-tooltip></el-table-column>
          <el-table-column prop="moneyLocked" label="订单金额" show-overflow-tooltip></el-table-column>
          <el-table-column prop="money" label="结算金额" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sceneLabel" label="支付渠道" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column prop="serviceCharge" label="手续费" show-overflow-tooltip></el-table-column>
          <el-table-column prop="realMoney" label="实际到账" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
          <el-table-column prop="redact" label="处理状态" fixed="right" width="120">
            <template slot-scope="{ row, index }">
              <div><el-tag type="danger" v-if="row.orderStatus == 'WAIT_SEND'">待处理</el-tag></div>
              <div><el-tag type="success" v-if="row.orderStatus == 'FINISH'">已发放</el-tag></div>
              <div v-if="row.orderStatus == 'REFUSE'">
                <el-tag type="info">已拒绝</el-tag>
                <div>拒绝原因：{{ row.remark }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="redact" label="操作" fixed="right" width="120">
            <template slot-scope="{ row, index }">
              <el-button type="text" @click="operateAction('handleOutMoney', row)" size='medium' v-if="row.orderStatus=='WAIT_SEND'">处理</el-button>
              <el-button type="text" @click="operateAction('detail', row)" size='medium' v-else>查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>
    </el-row>
    <handleUpdate ref="handleUpdate" @confirm='getDataList'></handleUpdate>
  </div>
</template>

<script>
import { formData } from './data'
import { findRecordIncomesForShopOutMoney, exportExcelForShop } from '@/api/pay/recordIncomes.js'
import handleUpdate from './components/handleUpdate.vue'
import { Loading } from 'element-ui';
export default {
  components: { handleUpdate },
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      searchParams: {},
      multipleSelection: [],
      formData,
      dateRange: [],
      fullscreenLoading: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近7天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近30天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近365天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

    }
  },
  created() {
    this.getDataList()
    this.changeTime()
  },
  methods: {
    handleSearch() {
      this.page = 1
      this.getDataList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changeTime(){
      if(this.dateRange && this.dateRange.length>0){
        this.searchParams.startTime = this.dateRange[0]
        this.searchParams.endTime = this.dateRange[1]
      }else{
        this.searchParams.startTime = ''
        this.searchParams.endTime = ''
      }
    },      
    operateAction(scene, row) {
      switch (scene) {
        case 'export':
          var rowIds = this.multipleSelection.map(function (item) {
            return item.id
          })
          if(rowIds.length>0){
            this.searchParams.ids = rowIds
          }else{
            this.searchParams.ids = []
          }
          this.fullscreenLoading = Loading.service({ fullscreen: true, text: '数据正在加工中，请稍后！' });
          this.searchParams.routerName = this.$route.name
          exportExcelForShop(this.searchParams).then(res => {
              this.fullscreenLoading.close()
              const link = document.createElement('a');
              let blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel'
              });
              link.href = URL.createObjectURL(blob);
              var filename = this.formatTime.dateFormat('YYYYMMDDhhmmss', Date.now())
              if(this.$route.name == 'shopSettle'){
                link.download = '加盟店结算记录' + filename + '.xlsx';
              }else if(this.$route.name == 'supplierSettle'){
                link.download = '供应商结算记录' + filename + '.xlsx';
              }
              
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
          })
          break;
        case 'handleOutMoney':
          this.$refs.handleUpdate.show(row, 'handleOutMoney')
          break;
        case 'detail':
          this.$refs.handleUpdate.show(row, 'detail')
          break;
        default:
          break;
      }
    },
    //数据请求-----------------------------------------------
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      this.searchParams.routerName = this.$route.name
      findRecordIncomesForShopOutMoney(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    }
  },
}
</script>


<style lang="scss" scoped></style>
